<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="card">
          <template #header>
            <div class="card-header">
              <div>实时状态</div>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="status-item">
                <div>当前温度</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="status-item">
                <div>设定温度</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="status-item">
                <div>运行时间</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="status-item">
                <div>蒸发器温度</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="status-item">
                <div>冷凝器温度</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="status-item">
                <div>最后除霜时间</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="card">
          <template #header>
            <div class="card-header">
              <div>温度趋势</div>
              <div>
                <el-radio-group v-model="radio1">
                  <el-radio-button label="24小时" value="New York" />
                  <el-radio-button label="7天" value="Washington" />
                  <el-radio-button label="30天" value="Los Angeles" />
                </el-radio-group>
              </div>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="card">
          <template #header>
            <div class="card-header">
              <div>设备控制</div>
            </div>
          </template>

          <!-- 温度控制区域 -->
          <div class="temperature-control">
            <div class="temperature-unit">温度设定（单位：℃）</div>
            <div class="temperature-value">
              <button class="temp-btn" @click="decreaseTemp">-</button>
              <span class="temp-value">{{ temperature }}</span>
              <button class="temp-btn" @click="increaseTemp">+</button>
            </div>
          </div>

          <!-- 功能控制网格 -->
          <div class="function-grid">
            <div class="function-item" v-for="(func, index) in functions" :key="index">
              <div class="function-icon">
                <i :class="func.icon"></i>
              </div>
              <div class="function-name">{{ func.name }}</div>
              <el-button class="status-btn" :type="func.status ? 'success' : 'danger'" @click="toggleFunction(index)">
                {{ func.status ? 'ON' : 'OFF' }}
              </el-button>
            </div>
          </div>

          <!-- 保存按钮 -->
          <el-button class="save-btn" @click="saveSettings">保存温度设置</el-button>
        </el-card>
        <el-card class="card">
          <template #header>
            <div class="card-header">
              <div>设备信息</div>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="status-item">
                <div>设备ID</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="status-item">
                <div>设备型号</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="status-item">
                <div>序列号</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="status-item">
                <div>固件版本</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="status-item">
                <div>最后维护时间</div>
                <div>-18.5°C</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref } from 'vue';

const radio1 = ref('New York');
const temperature = ref(-18);

const functions = ref([
  { name: '制冷', icon: 'el-icon-refrigerator', status: false },
  { name: '风扇', icon: 'el-icon-wind-power', status: false },
  { name: '除雾', icon: 'el-icon-fog', status: false },
  { name: '照明', icon: 'el-icon-light', status: false },
  { name: '除霜', icon: 'el-icon-cold-drink', status: false },
  { name: '门信号', icon: 'el-icon-warning-outline', status: false }
]);

const increaseTemp = () => {
  temperature.value++;
};

const decreaseTemp = () => {
  temperature.value--;
};

const toggleFunction = (index) => {
  functions.value[index].status = !functions.value[index].status;
};

const saveSettings = () => {
  ElMessage.success('温度设置已保存');
};
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 20px;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.status-item {
  border-left: 4px solid rgba(2, 167, 240, 1);
  background: rgba(244, 247, 248, 1);
  font-size: 15px;
  line-height: 25px;
  padding: 10px 15px;
  margin-bottom: 20px;
}
.temperature-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}
.temperature-unit {
  font-size: 16px;
  color: #606266;
  margin-bottom: 5px;
}
.temperature-value {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}
.temp-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1c84ff;
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 15px;
}
.temp-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  min-width: 80px;
  text-align: center;
}
.function-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 20px 0;
}
.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.function-icon {
  font-size: 24px;
  color: #909399;
  margin-bottom: 8px;
}
.function-name {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}
.status-btn {
  width: 60px;
}
.save-btn {
  width: 100%;
  background-color: #1c84ff;
  color: white;
  height: 40px;
  padding: 12px;
  margin-top: 20px;
}
</style>
